<template>
	<view class="card-template" @click="handleCloseTips">
		<view class="card" :style="{ marginTop: title == '保养作业时长' ? '0rpx' : '' }">
			<view class="maintenanceheader">
				<view class="title">
					{{ title }}
					<zb-tooltip v-if="opt.titleTips && opt.titleTips.show" placement="bottom">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="" slot="content">当天未安排保养任务</view>
					</zb-tooltip>

					<zb-tooltip placement="bottom" v-if="title == '作业人工时'" ref="tooltip" right="80" arrow-left="80">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view slot="content">
							作业人工时包括保养、维修、配件更换业务的作业人工时。
						</view>
					</zb-tooltip>

					<zb-tooltip placement="bottom" v-if="title == '工单保养作业时长'" ref="tooltip" right="120"
						arrow-left="125">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="tooltipContent" slot="content">
							<view class="">1.工单作业计时时段：</view>
							<view>·  开始计时：当工单被首次签到时。</view>
							<view>·  停止计时：当所有已签到人员全部完成签退时。</view>
							<view class="">2.工单保养作业时⻓计算：</view>
							<view>·  工单从首次“签到”到最后一次“签退”之间的所有计时时段的累计总和。</view>
							<view class="">示例：</view>
							<view>·  若工单被A签到（开始计时），随后B签到，最后A和B均签退且B签退在后（停止计时），则工单实际作业时⻓为从A签到时间到B签退时间的总时⻓</view>
						</view>
					</zb-tooltip>

					<zb-tooltip placement="bottom" v-if="title == '保养作业人工时'" ref="tooltip" right="100" arrow-left="100">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="tooltipContent " slot="content">
							<view class="">作业人工时：</view>
							<view class="">·  员工从签到到有效签退的连续工作时⻓，作为该员工的作业人工时。若存在多次签到签退行为，则进行累加。</view>
							<view class="">保养工单作业人工时：</view>
							<view class="">·  单张保养工单下，所有执行人员有效作业人工时的累计总和。</view>
							<view class="">·  若员工触发系统代签退，则该段工时计为0分钟(工时无效)。</view>
						</view>
					</zb-tooltip>

					<zb-tooltip placement="bottom" v-if="title == '保养执行'" right="40" arrow-left="40"
						ref="workStatusTips">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="" slot="content">

							<view class="tipsItem" v-for="(item, index) in statusList" :key="index">
								<view class="tipsItem_name">{{ item.name }}:</view>
								<view class="tipsItem_desc">
									<view>{{ item.desc }}</view>

									<view v-if="item.bc">{{ item.bc }}</view>
								</view>
							</view>
						</view>
					</zb-tooltip>
					<zb-tooltip placement="bottom" v-if="title == '保养时效性'" right="40" arrow-left="40"
						ref="workTimelinessTips">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="" slot="content">
							<view class="tipsItem">保养时效性定义</view>
							<view class="tipsItem" v-for="(item, index) in timeliessList" :key="index">
								<view style="width: 90rpx;" class="tipsItem_name">{{ item.name }}:</view>
								<view class="tipsItem_desc">
									<view>{{ item.desc }}</view>

									<view v-if="item.bc">{{ item.bc }}</view>
								</view>
							</view>
						</view>
					</zb-tooltip>

					<zb-tooltip placement="bottom" v-if="title == '年审梯逾期情况'" right="40" arrow-left="40">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="" slot="content">
							<view class="tipsItem">年审梯逾期情况</view>
							<view class="tipsItem">
								<view style="width: 90rpx;" class="tipsItem_name">已逾期:</view>
								<view class="tipsItem_desc">
									<view>在电梯当前逾期临界日期结束前尚未</view>
									<view>维保签字，则视任务「已逾期」。</view>
									<view>一般情况下，电梯上次维保签字日期</view>
									<view>往后第15天，为逾期临界日期。</view>
								</view>
							</view>

							<view class="tipsItem">
								<view style="width: 90rpx;" class="tipsItem_name">未逾期:</view>
								<view class="tipsItem_desc">
									<view>在电梯当前逾期临界日期结束前完成</view>
									<view>维保签字，则视任务「未逾期」。</view>
								</view>
							</view>
						</view>
					</zb-tooltip>
				</view>
				<capsule :typeIndex="type" @change="changeType" :is-show-capsule="isShowCapsule"></capsule>
			</view>
			<view class="maintenanceheader" style="margin-top: 16rpx;">
				<view class="" v-if="name.indexOf('achievements') == -1">
					<typeTabs :tabNums="tabNums" :isShowTabs="isShowTabs" @change="yearClick"></typeTabs>
				</view>
				<view v-if="title == '工单评分'" class="scoreTitle">工单分值占比</view>
				<view class="date-type" @click="clickDateBtn">
					{{
						filter.dateType !== 4
							? ['', '今天', '近7天', '近30天'][`${filter.dateType}`]
							: `${filter.startTime.replace(/-/g, '/')}-${filter.endTime.replace(/-/g, '/')}`
					}}
					<uni-icons size="20rpx" type="forward" style="line-height: 57rpx;margin-left: 2rpx;"
						color="#999"></uni-icons>
				</view>
			</view>

			<slot></slot>
			<view class="loading-block" v-if="loading">
				<image class="img" src="@/static/images/loading.png" mode=""></image>

				<view class="text">加载中..</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getLastDates } from '@/utils/tools.js';
import { formatTime } from '@/utils/utils.js';
import capsule from './capsule.vue';
import typeTabs from './typeTabs.vue';
import totals from './totals.vue';
export default {
	name: 'catd-template',
	components: {
		capsule,
		typeTabs,
		totals
	},
	props: {
		loading: Boolean,
		title: {
			type: String
		},
		// id: {
		// 	type: String, //组件id 唯一标识
		// 	default: 'id' + new Date().getTime()
		// },
		name: {
			type: String
		},
		opt: {
			type: Object,
			default: () => ({
				titleTips: {
					// 顶部标题问好提示
					show: false,
					content: ''
				}
			})
		},
		setTime: {
			type: Object,
			default: () => { }
		},
		isShowCapsule: {
			type: Boolean,
			default: true
		},
		isShowTabs: {
			type: Boolean,
			default: true
		},
		filterData: {
			type: Object,
			default: () => { }
		},
		safeAreaBottom: {
			type: [Number, String],
			default: 0
		}
	},
	watch: {
		setTime: {
			// console.log(val,"setTime");
			// const today=formatTime(new Date().getTime())
			// return
			// if(this.type==2){
			// 	this.filter.dateType=2
			// 	this.filter.startTime=getLastDates(7).startTime
			// 	this.filter.endTime=getLastDates(7).endTime
			// 	this.changeFilter()
			// }else{
			// 	this.filter.dateType = val.dateType;
			// 	this.filter.startTime = val.startTime;
			// 	this.filter.endTime = val.endTime;
			// }
			handler(val) {
				this.filter.dateType = val.dateType;
				this.filter.startTime = val.startTime;
				this.filter.endTime = val.endTime;

				if (!val.applyToAll) {
					this.type = val.type;
				}
			},
			deep: true
		},
		type(val) {
			// const today = formatTime(new Date().getTime());
			// if(this.filter.dateType==2||this.filter.dateType==3){
			// 	return
			// }
			// if (val == 2||val==1) {
			// 	this.filter.dateType = 2;
			// 	this.filter.startTime = getLastDates(7).startTime;
			// 	this.filter.endTime = getLastDates(7).endTime;
			// 	this.changeFilter();
			// }
		}
	},
	data() {
		return {
			id: 'id' + new Date().getTime(),
			filter: {
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: '',
				applyToAll: false
			},
			type: 1, // 统计类型 1数量，2趋势
			tabNums: 0,
			customDate: '',
			selectTimePopup: false,
			statusList: [
				{ name: '待开始', desc: '维保员尚未进行保养作业。' },
				{ name: '进行中', desc: '维保员正在保养作业中。' },
				{ name: '提交任务', desc: '已结束保养作业并已提交任务，', bc: '正等待维保员签字' },
				{ name: '维保签字', desc: '维保员已全部签字，正等待使', bc: '用单位签字。' },
				{ name: '已完成', desc: '使用单位已完成签字，保养工单', bc: '已完成并结束。' }
			],
			timeliessList: [
				{
					name: '及时',
					desc: '在当前计划日期结束前已',
					bc: '完成任务。'
				},
				{
					name: '超时',
					desc: '未能在当前计划日期结束',
					bc: '前完成任务。'
				},
				{
					name: '待定',
					desc: '计划日期在今日的未完成任务，且',
					bc: '当前未知是及时或超时。'
				}
			],
			overdueList: [
				{
					name: '已逾期',
					desc: '在电梯当前逾期临界日期结束前尚未维保签字，则视任务「已逾期」。',
					bc: '一般情况下，电梯上次维保签字日期往后第15天，为逾期临界日期。'
				},
				{
					name: '未逾期',
					desc: '在电梯当前逾期临界日期结束前完成维保签字，则视任务「未逾期」。',

				}
			]
		};
	},
	created() {
		// console.log('created', this.id);
		// 近七天
		const dates = getLastDates(7); // 默认近七天
		this.filter.startTime = dates.startTime;
		this.filter.endTime = dates.endTime;
		uni.$on(this.id, this.timeSubmit);
	},
	beforeDestroy() {
		uni.$off(this.id);
	},
	methods: {
		handleCloseTips() {
			uni.$emit('tooltipsClose');
		},
		// 确认修改时间
		timeSubmit(res) {
			console.log('timeSubmit', res);
			this.filter = res;
			// console.log(this.filter,"filter");
			this.changeFilter();
		},

		// 选择数量和趋势
		changeType(res) {
			this.type = res;
			this.filter.applyToAll = false;
			this.changeFilter();
		},
		// 选择年审梯非年审梯
		yearClick(res) {
			this.filter.applyToAll = false;
			this.tabNums = res;
			this.changeFilter();
		},
		// 点击日期按钮
		clickDateBtn() {
			uni.$emit('openTimeFilter', {
				name: this.name,
				id: this.id,
				...this.filter,
				type: this.type,
				safeAreaBottom: this.safeAreaBottom
			});
		},

		// 调整筛选条件
		changeFilter() {
			const obj = {
				dateType: this.filter.dateType, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: this.filter.startTime.replaceAll('/', '-'),
				endTime: this.filter.endTime.replaceAll('/', '-'),
				applyToAll: this.filter.applyToAll,
				useType: this.tabNums,
				name: this.name,
				id: this.id,
				type: this.type
			};
			this.$emit('filterFun', obj);
		}
	}
};
</script>

<style lang="scss" scoped>
@-webkit-keyframes changeright {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.tipsContent {
	width: 400rpx;
}

.tooltipContent {
	width: 600rpx;
	text-align: left;
	white-space: pre-line;
	word-break: break-all;
	z-index: 99;
}

.card-template {
	width: 100%;
	
	.card {
		background-color: #fff;
		width: calc(100% - 80rpx);
		padding: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 8rpx;
		position: relative;

		.loading-block {
			position: absolute;
			width: 100%;
			height: 100%;

			background-color: rgba(255, 255, 255, 0.8); //遮罩颜色
			position: absolute;
			left: 0;
			top: 0;
			z-index: 66;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #ababab;
			font-size: 24rpx;
			text-align: center;

			.img {
				animation: changeright 2s linear infinite;
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 16rpx;
			}
		}

		.maintenanceheader {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.title {
			font-size: 32rpx;
			border-left: 4rpx solid #ffffff;
			line-height: 32rpx;
			padding-left: 16rpx;
			color: #333333;
			font-weight: bold;
			margin-left: -19rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.date-type {
			color: #666666;
			font-size: 24rpx;
			height: 56rpx;
			padding-left: 10rpx;
			display: flex;
			align-items: center;
			border: 2rpx solid #d5d5d5;
			border-radius: 4rpx;
			text-align: center;
			justify-content: center;
			margin-left: auto;
		}

		.date-type-date {
			color: #666666;
			background: #f3f6f8;
			border-radius: 4rpx;
			font-size: 24rpx;
			padding: 3rpx 16rpx;
			font-weight: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 1rpx;

			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 3rpx;
			}
		}
	}

	.dateBox {
		.line {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 18rpx;
			padding-bottom: 20rpx;

			view {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
			}
		}

		height: 522rpx;
		background-color: #fff;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		box-sizing: border-box;

		.dateContent {
			padding-left: 40rpx;
			padding-right: 22rpx;
		}

		.date_title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 68rpx;
		}

		.date_content-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 52rpx;

			.date_line {
				width: 68rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.date_item {
				// width: 216rpx;
				height: 48rpx;
				border: 2rpx solid #cccccc;
				border-radius: 8rpx;
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				color: #666;
			}

			.date_item:nth-child(2) {
				margin: 0 20rpx;
			}

			.custom_date_item {
				color: #cccc;
			}

			.date_bottom {
				height: 108rpx;
			}

			.actDate {
				color: #0091ff;
				border-color: #0091ff;
			}
		}

		.date_bottom {
			display: flex;
			position: fixed;
			width: 100%;
			bottom: 10rpx;

			.date_bottom_left {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
			}

			.date_bottom_right {
				display: flex;
				width: 478rpx;
				justify-content: center;

				view {
					width: 412rpx;
					height: 70rpx;
					background: #0091ff;
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}
			}
		}
	}

	.tipsItem {
		display: flex;

		// width: 500rpx;
		.tipsItem_name {
			display: flex;
			width: 110rpx;
		}

		.tipsItem_desc {}
	}
}

.msg {
	width: 30rpx;
	height: 30rpx;
	margin-left: 8rpx;
	padding-top: 5rpx;
}

.data-types-right {
	width: 96rpx;
	height: 52rpx;
	background: #f3f6f8;
	border-radius: 4rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	image {
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx;
	}
}

.scoreTitle {
	color: #333;
	font-weight: 600;
	font-size: 28rpx;
}
</style>
